<!-- 报修 -->
<template>
  <div>
    <!--   返回上一页 <   -->
    <div class="page-title">
      <div class="flex justify-between" style="margin-bottom: 5px">
        <div class="flex items-center">
          <van-icon
            name="arrow-left"
            size="20"
            style="border-radius: 50%"
            @click="goBack"
          />
          <div class="ml-[10px]" style="margin-left: 130px">最近报修</div>
        </div>
        <div class="flex items-center addrepair">
          <el-button type="primary" size="small" @click="goAddRepair">新增报修</el-button>
        </div>
      </div>
      <hr />
      <div class="bgc">
        <div class="card apartment-repair" v-for="(item, index) in repairList" :key="index">
          <div><span>联系人: {{ item.name }}</span></div>
          <div><span>联系电话: {{ item.phone }}</span></div>
          <div><span>公寓地址: {{ item.address }}</span></div>
          <div><span>问题描述: {{ item.description }}</span></div>
          <div style="display: flex; justify-content: space-between; margin-right: 3px;"><span>报修时间: {{ item.createdTime }}</span> <span style="margin-right: 0">
              <el-button type="success" size="small" v-if="item.status"
                >已维修</el-button
              >
              <el-button type="info" size="small" v-else
                >未维修</el-button
              ></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import http from "@/utils/http";
import { useUserStore } from "@/store/modules/user";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
const userInfo = userStore.userInfo;
// 登录信息
const forms = ref({
  address: "",
  name: "",
  phone: "",
  description: "",
  imgUrl: "",
  createdTime: ""
});
const repairList = ref();
const getRepairList = () => {
  http.get(`/user/repair/getUserRepair`).then(res => {
    repairList.value = res.data;
    console.log("repairList", repairList.value);
  });
};

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 新增报修
const goAddRepair = () => {
  router.push({
    name: "addRepair",
    query: {
      redirect: route.fullPath
    }
  });
};

onMounted(async () => {
  console.log("route", route);
  // console.log("router-onMounted", router);
  await getRepairList();
});
</script>

<style scoped lang="less">
.addrepair {
  margin-right: 5px;
  margin-top: 5px;
}
.apartment-repair {
  padding: 2px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.bgc {
  height: 667px;
  background-color: white;
}
</style>
